<template>
	<div class="my-btn-bar">
		<mu-button v-if="isCancel" @click="cancel" class="my-btn my-cancel" round="round" flat>{{cancelHint}}</mu-button>
		<mu-button v-if="isPay" @click="pay" class="my-btn my-success" round="round">{{paiHint}}</mu-button>
	</div>
</template>

<script>
export default {
	name: "MyButtonBar",
	props: {
		pay: {
			Function, default() {
				console.log('Pay')
			}
		},
		cancel: {
			Function, default() {
				console.log('Cancel')
			}
		},
		isCancel: {
			type: Boolean,
			default(){
				return true
			}
		},
		isPay: {
			type: Boolean,
			default(){
				return true
			}
		},
		paiHint: String,
		cancelHint: String
	}
}
</script>

<style scoped>
	.my-btn-bar {
		height: 56px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		padding: 0 20px;
		background: white;
		margin: 10px auto;
		box-shadow: 0 0 4px #BBBBBB;
	}
	.my-btn {
		padding: 0;
	}
	.my-success{
		background-image: linear-gradient(90deg, #7FD9C7, #4EA592);
		color: white;
	}
	.my-cancel{
		border: 1px solid #4EA592;
		margin-right: 10px;
		border-radius: 18px;
		color: #4ea592;
	}

</style>